<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/toefl.css}" rel="stylesheet" type="text/css">
    <script type="text/javascript" th:src="@{/js/jquery-2.1.0.js}"></script>

    <style>
        .code {
            font-family: Arial;
            font-style: italic;
            color: #d400d6;
            font-size: 30px;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            width: 100px;
            height: 50px;
            line-height: 60px;
            text-align: center;
            vertical-align: middle;
            background-color: #68bf4a52;
            margin-left: 10px;
        }

        .code_span {
            text-decoration: none;
            font-size: 15px;
            color: #288bc4;
            padding-left: 10px;
            margin-left: 10px;
        }

        .code_span:hover {
            text-decoration: underline;
            cursor: pointer;
        }

    </style>
</head>

<body>

<div class="doc1180">
    <div class="login">
        <div class="login_left">
            <h3 class="login_h3">欢迎登录人人托福</h3>
            <form th:action="@{/security/login}" method="post" th:object="${user}">
                <div class="login_sr"><input type="text" id="userName" name="userName" class="login_inputYhm"
                                             placeholder="用户账号或邮箱"></div>
                <div class="login_sr"><input type="password" id="userPwd" name="userPwd" class="login_inputMm"
                                             placeholder="密码"></div>
                <div class="login_sr fn-clear"><input id="inputCode" style="float:left;" type="text"
                                                      class="login_inputYzm" placeholder="验证码">
                    <div class="login_inputYzmPic">
                        <div id="checkCode" class="code" onclick="createCode(4)"></div>
                    </div>
                    <span class="code_span" onclick="createCode(4)">看不清换一张</span></div>
                <div class="login_xieyi"><input id="login_xieyi" type="checkbox" value=""
                                                style="margin-right:10px; vertical-align:middle;">我同意<a href="###">《人人托福网服务协议》</a>
                </div>
                <a onclick="$('button[name=\'loginButton\']').click();" class="login_Button"> 登 录 </a>
                <button name="loginButton" class="b" type="submit" style="display: none;"></button>
                <div class="login_zcymm"><a href="###">注册帐号</a><a href="###" class="login_zhmm">找回密码</a></div>
            </form>
        </div>
        <div class="login_right">
            <div class="login_rightH3">您也可以使用以下方式登录：</div>
            <div class="login_sanfang"><a href="###"><img src="../img/login_wb.png">新浪微博</a></div>
            <div class="login_sanfang"><a href="###"><img src="../img/login_qq.png">QQ登录</a></div>
            <div class="login_sanfang"><a href="###"><img src="../img/login_qw.png">腾讯微博</a></div>
            <div class="login_sanfang"><a href="###"><img src="../img/login_rr.png">人人网</a></div>
            <div class="login_shouquan">授权后表明你已同意 <a href="###">《人人托福网服务协议》</a></div>
        </div>
    </div>
</div>

<!--验证码处理-->
<script>
    //页面加载时，生成随机验证码
    window.onload = function () {
        createCode(4);
    }

    //生成验证码的方法
    function createCode(length) {
        var code = "";
        var codeLength = parseInt(length); //验证码的长度
        var checkCode = document.getElementById("checkCode");
        ////所有候选组成验证码的字符，当然也可以用中文的
        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        //循环组成验证码的字符串
        for (var i = 0; i < codeLength; i++) {
            //获取随机验证码下标
            var charNum = Math.floor(Math.random() * 62);
            //组合成指定字符验证码
            code += codeChars[charNum];
        }
        if (checkCode) {
            //为验证码区域添加样式名
            checkCode.className = "code";
            //将生成验证码赋值到显示区
            checkCode.innerHTML = code;
        }
    }

    //检查验证码是否正确
    function validateCode() {
        //获取显示区生成的验证码
        var checkCode = document.getElementById("checkCode").innerHTML;
        //获取输入的验证码
        var inputCode = document.getElementById("inputCode").value;
        console.log(checkCode);
        console.log(inputCode);
        if (inputCode.length <= 0) {
            alert("请输入验证码！");
        } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
            alert("验证码输入有误！");
            createCode(4);
        } else {
            // alert("验证码正确！");
        }
    }
</script>
<script th:inline="javascript">

    $(function () {
        //删除操作
        $(".delete").click(function () {
            var href = $(this).attr("href");
            if (confirm("确定要删除吗?")) {
                $("form:eq(0)").attr("action", href).submit();
                return false;
            }
        });

        $(".b").click(function () {
            //协议检测
            var login_xieyi = document.getElementById("login_xieyi");
            console.log("xieyi status:" + login_xieyi.checked);
            if (!login_xieyi.checked) {
                alert("请先阅读并同意《人人托福网服务协议》！");
                return false;
            }
            // 信息完整检测
            console.log("userName: " + document.getElementById("userName").value);
            console.log("userPwd: " + document.getElementById("userPwd").value);
            console.log(document.getElementById("userName").value.length <= 0)
            if (document.getElementById("userName").value.length <= 0) {
                alert("请输入用户名或邮箱！");
                return false;
            }
            if (document.getElementById("userPwd").value.length <= 0) {
                alert("请输入密码！");
                return false;
            }

            //获取显示区生成的验证码
            var checkCode = document.getElementById("checkCode").innerHTML;
            //获取输入的验证码
            var inputCode = document.getElementById("inputCode").value;
            console.log(checkCode);
            console.log(inputCode);
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
                return false;
            } else if (inputCode.toUpperCase() !== checkCode.toUpperCase()) {
                alert("验证码输入有误！");
                createCode(4);
                return false;
            } else {
                // alert("验证码正确！");
            }

            var href = $(this).attr("href");
            $("form:eq(0)").attr("action", href).submit();
            return false;

        });

        $(".update").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);
        });

        $(".info").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);

        });


    });

</script>
</body>
</html>
